@import '@tencent/micro-frontend-shared/style/color.scss';

.scheme {
  height: calc(100vh - 48px);
  overflow: hidden;

  .no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100% - 280px);
    
    > div {
      margin: 10px 0px;
      color: var(--tca-grey-8);
    }
  }
}

.option-wrapper {
  > span {
    width: 100%;
  }
}

.tmpl {
  display: flex;
  justify-content: space-between;

  .tmpl-tag {
    color: $cyan-6;
    border-color: $cyan-6;
    background-color: #fff;
    border-radius: 2px;

    &.sys {
      color: $grey-7;
      border: 1px solid $grey-7;
    }
  }
}

.search-scheme {
  padding: 0px 24px;
  border: none;
  border-top: 1px solid $grey-1;
  border-bottom: 1px solid $grey-1;

  input {
    color: $grey-7;
  }

  :global(.t-input) {
    border: none;
    box-shadow: none;
  }
}

.scheme-container {
  height: calc(100% - 56px);
  white-space: nowrap;

  .label {
    display: inline-block;
    height: 20px;

    line-height: 20px;
    font-size: 12px;
    color: #ffffff;
    padding: 0 6px;
    border-radius: 2px;
    background-color: $blue-5;
  }

  .scheme-left {
    display: inline-block;
    height: 100%;
    width: 260px;

    .add-scheme {
      width: 100%;
    }

    &-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 30px;

      h3 {
        color: rgb(32, 45, 64);
        font-size: 18px;
        font-weight: 500;
        margin: 0;
      }
    }

    &-body {
      position: relative;
      height: calc(100% - 100px);

      .item-wrapper {
        height: 74px;
        padding: 0 20px;
        border-right: 2px solid transparent;
        transition: all 0.3s;

        &:hover,
        &.active {
          cursor: pointer;
          border-right-color: $blue-5;
          background-color: #f2f4f6;
        }

        .item {
          height: 100%;
          padding-left: 10px;
          padding-top: 15px;
          border-bottom: 1px solid $grey-1;

          .title {
            display: flex;
            justify-content: space-between;
            align-items: center;

            h4 {
              flex: 1;
              font-size: 16px;
              color: $grey-8;
              font-weight: normal;
              padding-right: 10px;
              margin-bottom: 0;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;

              &.deprecated-title {
                color: #919daf;
              }
            }

            .tmpl-icon {
              color: $cyan-6;

              &.sys {
                color: $grey-5;
              }
            }
          }

          .languages {
            font-size: 12px;
            color: $grey-7;
            margin-top: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            span {
              padding-right: 10px;
              margin-right: 10px;
              border-right: 1px solid #e6e9ed;

              &.last {
                margin-right: 0;
                border-right: none;
              }
            }
          }
        }
      }

      $deprecated-header-height: 43px;
      $deprecated-header-body: 300px;

      .used-scheme {
        transition: all 0.3s;
        overflow: auto;

        &.show {
          height: calc(
            100% - (#{$deprecated-header-height} + #{$deprecated-header-body})
          );
        }

        &.hide {
          height: calc(100% - #{$deprecated-header-height});
        }
      }

      .search-no-data {
        color: $grey-6;
        font-size: 13px;
        text-align: center;
        padding-top: 20px;
      }

      .deprecated {
        position: sticky;
        bottom: 0;
        width: 100%;
        background-color: #ffffff;
        transition: all 0.3s;

        // position: absolute;
        // bottom: 0;
        // width: 100%;

        .header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 45px;
          padding-left: 30px;
          padding-right: 20px;
          border-top: 1px solid #e6e9ed;
          border-bottom: 1px solid #e6e9ed;
          box-shadow: inset 0 -1px 0 0 #f5f7fa,
            0 -4px 6px 0 rgba(32, 45, 64, 0.05);
          cursor: pointer;

          h4 {
            font-size: 16px;
            font-weight: 500;
            color: #606c80;
            margin-bottom: 0;
          }
        }

        &-body {
          // max-height: calc(40vh - 45px);
          // overflow: auto;
          overflow-y: auto;
          transition: height 0.3s;

          &.show {
            height: 300px;
          }

          &.hide {
            height: 0;
          }
        }
      }
    }
  }

  .scheme-right {
    display: inline-block;
    width: calc(100% - 260px);
    vertical-align: top;
    height: 100%;
    padding: 30px;
    overflow-y: auto;
    border-left: 1px solid rgb(218, 223, 230);

    .header {
      display: flex;
      align-items: center;

      .title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 0;
        margin-right: 20px;
      }

      .deprecated-label {
        color: #ffffff;
        background-color: #ec333f;
      }
    }

    .tmpl-desc {
      margin-top: 10px;
    }
  }
}

.scheme-form-vertical {
  .form-desc {
    margin-top: -20px;
    margin-bottom: 0;
    color: #919daf;
    white-space: normal;
  }

  .question-icon {
    color: #919daf;
    font-size: 16px;
    margin-top: -2px;
    margin-left: 2px;
    transition: all 0.3s;
    cursor: pointer;

    &:hover {
      color: $grey-8;
    }
  }

  .ellipsis {
    padding: 5px 6px;
    margin-left: 10px;
    border-radius: 2px;
    transition: all 0.3s;
    cursor: pointer;

    &:hover,
    &:active {
      background-color: #f2f4f6;
    }
  }
}
